<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 .input>input{
            border: 0px;
            height:35px;
            width:292px;
        }
       #d1{
           width:900px;
           height:1000px;
           color:#c3c1c8;
           list-style: none;
        }
        #d1 .input{
            width:330px;
            border:1px solid #c3c1c8;
            margin:10px;
        }
        #d1>li{
            margin-top: 20px;
        }
        #d1 .input img{
            vertical-align: middle;
            padding: 10px;
        }
        #d1 .span{
            padding:10px;
            height:30px;
            vertical-align: middle;
        }
        #d1 .yanzhen{
            width:230px;
        }
        #d1 .yanzhen input{
            width:192px;
        }
        #d1 .img{
            height:30px;
        }
        #d1 .img>img{
            border:1px solid #c3c1c8;
            vertical-align: middle;
        }
        .float{
            float: left;
        }
        .clear:after{
            content: "";
            clear:both;
            display:inline-block;
            height:0;
        }
        #d1 li:last-child{
            width:600px;
            text-align: center;
        }
        #d1 li:last-child button{
            width:200px;
            height:50px;
            border: 0px;
            border-radius: 8px;
            background-color: #1F87CC;
            color: white;
            font-size: 16px;
        }
    </style>
</head>
<body>
<ul id="d1">
    <li><div class="input float"><img src="img/login-input5.png"><input type="text" placeholder="请输入您的常用邮箱"></div><div class="span clear"><label >请输入您的常用邮箱</label></div></li>
    <li><div class="input float"><img src="img/login-input1.png"><input type="text" placeholder="请输入昵称"></div><div class="span clear"><label>  4-12位字符、英文、数字或者中文均可</label></div></li>
    <li><div class="input float"><img src="img/login-input2.png"><input type="password" placeholder="请输入密码"></div><div class="span clear"><label>  6-16位字符或数字、字母区分大小写</label></div></li>
    <li><div class="input"><img src="img/login-input2.png"><input type="password" placeholder="请再次输入密码"></div></li>
    <li><div class="input float yanzhen"><img src="img/login-input3.png"><input type="text" placeholder="请输入右侧验证码"></div><div class="img clear"><img src="img/yanzhengma.png"></div></li>
    <li><input type="checkbox">同意<a href="#">用户服务条款</a></li>
    <li><button>注册</button></li>
</ul>
</body>
</html>